﻿@using Toolkit.Web
@using Toolkit.Web.ViewComponents
@using Toolkit.Web.ViewComponents.Panel
@using Toolkit.Web.Mvc
@using Toolkit.Web.Mvc.ViewComponents

@{
    Layout = "~/Views/Shared/_Layout.cshtml";
}

@section Title
{
    Panel
}

@section StyleSheetIncludes
{
    <link href="/Content/StyleSheets/Panel.css" rel="stylesheet" />
}

@section JavaScriptIncludes
{
    <script src="/Scripts/jqkit.min.js"></script>
    <script src="/Scripts/jqkit.components.min.js"></script>
    <script>
        function onBeforeExpand() {
            try { console.log('before expand - ' + $(this).attr('data-vc-id')); } catch(error) {};
        }
        function onBeforeCollapse() {
            try { console.log('before collapse - ' + $(this).attr('data-vc-id')); } catch(error) {};
        }
    </script>
}

<div class="section">
    <h2>Simple</h2>
    @(
        Html.Toolkit()
            .Panel()
            .PrimaryHeader(@<text>Primary Title</text>)
            .Content(@<text>Content</text>)
    )
</div>

<div class="section">
    <h2>Common Functionality</h2>
    @(
        Html.Toolkit()
            .Panel(new { @style = "max-width:500px;" })
            .PrimaryHeader(@<text>Primary Title</text>)
            .SecondaryHeader(@<text><a href="#">Edit</a> | <a href="#">Settings</a></text>)
            .Content(@<text>
                Content<br />
                <br />This is content.<br />This is content.<br />This is content.<br />This is content.<br />This is content.<br />This is content.
                <br />This is content.<br />This is content.<br />This is content.<br />This is content.<br />This is content.<br />This is content.
            </text>, new { @style = "max-height:100px;min-height:50px;overflow:auto;" })
            .Collapsible(true)
    )
</div>

<div class="section">
    <h2>Initially Collapsed</h2>
    @(
        Html.Toolkit()
            .Panel(new { @style = "max-width:500px;" })
            .PrimaryHeader(@<text>Primary Title</text>)
            .SecondaryHeader(@<text><a href="#">Edit</a> | <a href="#">Settings</a></text>)
            .Content(@<text>
                Content<br />
                <br />This is content.<br />This is content.<br />This is content.<br />This is content.<br />This is content.<br />This is content.
                <br />This is content.<br />This is content.<br />This is content.<br />This is content.<br />This is content.<br />This is content.
            </text>, new { @style = "max-height:100px;min-height:50px;overflow:auto;" })
            .Collapsible(true, true)
    )
</div>

<div class="section">
    <h2>Events</h2>
    @(
        Html.Toolkit()
            .Panel(new { @style = "max-width:500px;" })
            .PrimaryHeader(@<text>Primary Title</text>)
            .SecondaryHeader(@<text><a href="#">Edit</a> | <a href="#">Settings</a></text>)
            .Content(@<text>
                Content<br />
                <br />This is content.<br />This is content.<br />This is content.<br />This is content.<br />This is content.<br />This is content.
                <br />This is content.<br />This is content.<br />This is content.<br />This is content.<br />This is content.<br />This is content.
            </text>, new { @style = "max-height:100px;min-height:50px;overflow:auto;" })
            .Collapsible(true)
            .ClientEventHandlers(handlers =>
            {
                handlers.OnBeforeCollapse = "onBeforeCollapse";
                handlers.OnBeforeExpand = "onBeforeExpand";
            })
    )
</div>

